<template>
  <div class="w-full h-full flex justify-center items-center">
    <!--        <img class="w-[300px] h-[300px]" :src="codes" />-->
    <div class="w-[300px] h-[300px]">
      <el-image class="w-full h-full" :src="codes" fit="fill" loading="lazy">
        <template #error>
          <div class="image-slot w-full h-full flex justify-center items-center">
            <el-icon class="!text-[24px] ">
              <Loading class="animate-spin !text-[var(--el-color-primary)]" v-if="loading"/>
              <Picture v-else/>
            </el-icon>
          </div>
        </template>
      </el-image>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {Loading,Picture} from '@element-plus/icons-vue'
import {qrcode} from "@/api/manage/users-manager/users-manager/index"

const codes = ref("")
const loading = ref(false)
onMounted(() => {
  loading.value = true
  qrcode({}).then(res => {
    codes.value = res.result
  }).finally(() => {
    loading.value = false
  })
})
</script>
